<template>
  <!-- 折线图2图组件 -->
  <div id="main" ref="barEchart" class="barEchart" />
</template>
<script>
// import * as echarts from 'echarts'
export default {
  name: 'Linechart',
  data() {
    return {
      property: 'value',
    };
  },
  mounted() {
    this.drawChart();
  },
  methods: {
    drawChart() {
      //   准备好DOM 初始化 echart 实例
      //   var myChart = this.$echarts.init(document.getElementById('main'))
      // 同一个页面使用多次会出现数据覆盖的问题 只会显示一个页面 解决方法使用ref
      const myChart = this.$echarts.init(this.$refs.barEchart);
      //   绘制图标
      myChart.setOption({
        grid: {
          // 控制图表的上下左右坐标
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          boundaryGap: false, // 紧挨边缘
        },
        yAxis: {
          type: 'value',
          //   缩放  脱离0的比例scale
          scale: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {}, // 导出图片
            dataView: {}, // 数据视图
            restore: {}, // 还原
            dataZoom: {}, // 区域缩放
            magicType: {
              type: ['bar', 'line'],
            }, //
          },
        },
        legend: {
          data: ['语文', '数学'],
        },
        series: [
          {
            name: '语文',
            data: [1200, 1000, 990, 880, 780, 900, 1200, 1100, 209, 560, 880, 600],
            type: 'line',
            // 堆叠图 把第一个数据和第二个数据的累加和就是二个折线图
            stack: 'all',
            areaStyle: {},
            //   平滑
            // smooth: true,

            lineStyle: {
              //   color: 'green'// 设置线的颜色
              //   type: 'dashed' // 虚线  solid 实线 dotted 点线
            },

            // areaStyle: { // 面积图
            //   color: 'pink'
            // }
          },
          {
            name: '数学',
            data: [125, 556, 3312, 895, 260, 560, 880, 980, 780, 394, 568, 888],
            type: 'line',
            // 堆叠图 把第一个数据和第二个数据的累加和就是二个折线图
            stack: 'all',
            areaStyle: {},
            //   平滑
            // smooth: true,

            lineStyle: {
              color: 'green', // 设置线的颜色
              //   type: 'dashed' // 虚线  solid 实线 dotted 点线
            },

            // areaStyle: { // 面积图
            //   color: 'pink'
            // }
          },
        ],
      });
    },
  },
};
</script>
